<template>
<!-- 折扣组件 -->
    <div class="ele-discount-info">
        <span :class="'ele-discount-icon-'+this.discountInfo.type" class="ele-discount-icon"> </span>
        <span class="ele-discount-text" v-text="discountInfo.description"></span>
    </div>
</template>

<script>
import {commonUtils} from "@/common/js/utils"
    export default {
        name: "discount_info",
        mixins:[commonUtils],
        props:{
            // 折扣信息
            discountInfo:{}
        },
    }
</script>

<style>
    .ele-discount-info{
        padding: 0 12px;
        width: 100%;
        vertical-align: middle;
    }
    .ele-discount-text{
        margin-left: 6px;
        font-size: 12px;
        font-weight: 200;
        color: rgb(255,255,255);
        line-height: 12px;
    }
    .ele-discount-icon{
        display: inline-block;
        height: 16px;
        width: 16px;
        border-radius: 2px;
        vertical-align: middle;
        background-size: cover;
    }
.ele-discount-icon-0{
    background-image: url("../assets/img/decrease_1@2x.png");
}
    .ele-discount-icon-1{
        background-image: url("../assets/img/discount_1@2x.png");
    }
    .ele-discount-icon-2{
        background-image: url("../assets/img/special_1@2x.png");
    }
    .ele-discount-icon-3{
        background-image: url("../assets/img/invoice_1@2x.png");
    }
    .ele-discount-icon-4{
        background-image: url("../assets/img/guarantee_1@2x.png");
    }
</style>
